angular.module('web').directive('dropZone', function() {
  return {
    link: linkFn,
    restrict: 'EA',
    transclude: false,
    scope: {
      dropZone: '='
    }
  };

  function linkFn(scope, ele, attr) {
    $(document).on('dragenter', stopPrev);
    $(document).on('dragover', stopPrev);
    $(document).on('dragleave', stopPrev);
    $(document).on('drop', stopPrev);
    function stopPrev(e) {
      e.originalEvent.stopPropagation();
      e.originalEvent.preventDefault();
    }

    var shadow;

    $(ele).on('dragenter', function() {
      shadow = $('<div></div>')
          .css({
            position: 'absolute',
            height: $(ele).height(),
            width: $(ele).width(),
            opacity: 0.5,
            top: $(ele).offset().top,
            left: $(ele).offset().left,
            background: 'yellow',
            zIndex: 20,
            boxShadow: 'inset yellow 0 0 10px'
          })
          .appendTo('body');

      shadow
          .on('dragleave', function() {
            shadow.remove();
          })
          .on('drop', function(e) {
            shadow.remove();
            scope.dropZone(e);
          });
    });
  }
});
